
@import-normalize;
@tailwind base;
@tailwind components;
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@layer components {
    .sidebar-container{
        @apply  fixed top-0 left-0 h-screen w-16 flex flex-col
        bg-white dark:bg-gray-900 shadow-lg
        }
    .sidebar-icon {
        @apply relative flex items-center justify-center 
        h-12 w-12 mt-2 mb-2 mx-auto  
        bg-gray-400 hover:bg-green-600 dark:bg-gray-800 
        text-green-500 hover:text-white
        hover:rounded-xl rounded-3xl
        transition-all duration-300 ease-linear
        cursor-pointer shadow-lg ;
    }

    .sidebar-tooltip {
        @apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
        text-white bg-gray-900 
        text-xs font-bold 
        transition-all duration-100 scale-0 origin-left;
    }

    .sidebar-hr {
        @apply bg-gray-200 dark:bg-gray-800 
        border border-gray-200 dark:border-gray-800 rounded-full
        mx-2;
    }

    .top-navigation {
        @apply flex flex-row items-center justify-evenly 
        bg-gray-300 dark:bg-gray-700 bg-opacity-90 
        w-full h-16 
        m-0 
        shadow-lg;
    }

    .top-navigation-icon {
        @apply text-gray-500
        mr-3 ml-4
        transition duration-300 ease-in-out 
        hover:text-pink-400 
        cursor-pointer;
    }

    .top-navigation-icon:first {
        @apply ml-auto mr-4;
    }
  
    .title-text {
        @apply text-xl text-gray-500 tracking-wider font-semibold text-opacity-80 
        mr-auto ml-2 my-auto 
        transition duration-300 ease-in-out;
    }

    .content-container {
        @apply flex-auto flex-col 
        bg-gray-300 dark:bg-gray-700
        m-0 pl-16
        h-full w-full 
        overflow-hidden;
    }

    .content-list {
        @apply flex flex-col items-center 
        h-full w-full 
        mt-0 ml-0 mx-auto px-0 pb-12 
        overflow-y-scroll;
    }

    .post {
        @apply w-full
        flex flex-row items-center justify-evenly
        py-4 px-8 m-0
        cursor-pointer;
    }

    .post-content {
        @apply w-4/5 
        flex flex-col justify-start 
        ml-auto;
    }

    .post-text {
        @apply text-lg text-left text-gray-800 dark:text-white 
        mr-auto whitespace-normal;
    }

    .post-owner {
        @apply text-left font-semibold text-gray-800 dark:text-white mr-2 cursor-pointer;
    }

    .avatar-wrapper {
        @apply flex flex-col items-center
        w-12 
        m-0 ml-auto mb-auto;
    }

    .avatar {
        @apply flex-none
        w-12 h-full 
        rounded-full shadow-md
        object-cover bg-gray-100 
        mb-auto mt-0 mx-0 
        cursor-pointer;
    }

    .timestamp {
        @apply text-xs text-left font-semibold text-gray-500 dark:text-gray-600 ml-2;
    }


}
